<!-- 高梦岩  2017-12-26 商城设置 -->
<template>
    <section>
        <el-row class="mt-10">
            <el-col :span="24" >

                <el-form label-position="left" :model="Form" label-width="120px" :rules="FormRules"  ref="Form">
                    <el-form-item class="pl-5" label="公司地址" prop="WebSite_ADDRESS" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_ADDRESS" class="pr-2" ></el-input>
                    </el-form-item>
                    <el-form-item class="pl-5"  label="备案号" prop="WebSite_CASE_NUMBER" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_CASE_NUMBER" class="pr-2" ></el-input>
                    </el-form-item>
                    <el-form-item class="pl-5"  label="公司名称" prop="WebSite_COMPANY_NAME" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_COMPANY_NAME" class="pr-2" ></el-input>
                    </el-form-item>
                    <el-form-item class="pl-5" label="是否关闭网站" prop="WebSite_CLOSED" style="font-size: 20px;padding-top: 30px">
                        <el-switch
                                v-model="Form.WebSite_CLOSED"
                                active-value="1"
                                inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item class="pl-5" label="标签页图标" prop="WebSite_ICON" style="font-size: 20px;padding-top: 30px">
                        <!--图片上传开始-->
                        <el-upload
                                list-type="picture-card"
                                :action="fileUrl"
                                :on-success="onEditFileSuccess"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                :headers="fileHeader"
                                :before-upload="beforeUpload"
                                :showFileList="true"
                                :limit="1"
                                >
                            <img v-if="fullImage.fullUrl" :src="fullImage.fullUrl" class="avatar">
                            <div slot="tip" class="el-upload__tip">&nbsp;&nbsp;只能上传ico文件，且不超过30KB</div>
                           <!-- <i class="el-icon-plus" v-show="false"></i>-->
                        </el-upload>

                    </el-form-item>
                    <el-form-item class="pl-5" label="联系邮箱" prop="WebSite_MAIL" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_MAIL" class="pr-2" ></el-input>
                    </el-form-item>
                    <el-form-item class="pl-5" label="联系电话" prop="WebSite_PHONE" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_PHONE" class="pr-2" ></el-input>
                    </el-form-item>
                    <el-form-item class="pl-5" label="SEO描述" prop="WebSite_SEO_DESC" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_SEO_DESC" class="pr-2" ></el-input>
                    </el-form-item>
                    <el-form-item class="pl-5" label="SEO关键字" prop="WebSite_SEO_KEY" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_SEO_KEY" class="pr-2"></el-input>
                    </el-form-item>
                    <el-form-item class="pl-5" label="网站名称" prop="WebSite_WEB_NAME" style="font-size: 20px;padding-top: 30px">
                        <el-input style="width:60%" v-model="Form.WebSite_WEB_NAME" class="pr-2"></el-input>
                    </el-form-item>
                </el-form>
                <div style="float: right;" class="p-5"  >
                    <el-button type="primary" @click.native="editWebSetting">保存</el-button>
                </div>
            </el-col>
        </el-row>
    </section>
</template>
<script>
    import {getSettings, editSettings, uploadFilesUrl} from '../../api/api'
    export default {
      data () {
        return {
            //  火狐下需要指定返回的格式，不然默认返回xml
          fileHeader: {
            Authorization: `Bearer ${this.$store.state.token}`,
            Accept: 'application/json'
          },
          fileUrl: uploadFilesUrl,
          dialogImageUrl: '',
          dialogVisible: false,
          WebSite_CLOSED: true,
          Form: {
            address: '',
            WebSite_ADDRESS: '',
            WebSite_CASE_NUMBER: '',
            WebSite_CLOSED: false,
            WebSite_COMPANY_NAME: '',
            WebSite_ICON: '1',
            WebSite_MAIL: '',
            WebSite_PHONE: '',
            WebSite_SEO_DESC: '',
            WebSite_SEO_KEY: '',
            WebSite_WEB_NAME: ''
          },
          webSetList: [
            {
              key: 'WebSite_ADDRESS',
              full_image: '',
              value: '',
              title: '公司地址',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_CASE_NUMBER',
              full_image: '',
              value: '',
              title: '备案号',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_CLOSED',
              full_image: '',
              value: '',
              title: '是否关闭网站',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_COMPANY_NAME',
              full_image: '',
              value: '',
              title: '公司名称',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_ICON',
              full_image: '',
              value: '',
              title: '标签页图标',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_MAIL',
              full_image: '',
              value: '',
              title: '联系邮箱',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_PHONE',
              full_image: '',
              value: '',
              title: '联系电话',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_SEO_DESC',
              full_image: '',
              value: '',
              title: 'SEO描述',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_SEO_KEY',
              full_image: '',
              value: '',
              title: 'SEO关键字',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'WebSite_WEB_NAME',
              full_image: '',
              value: '',
              title: '网站名称',
              updated_at: '2017-12-20 03:06:00'
            }
          ],
          FormRules: {
            WebSite_ADDRESS: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
            ],
            WebSite_CASE_NUMBER: [
                    {required: true, message: '请输入备案号', trigger: 'blur'}
            ],
            WebSite_CLOSED: [
                    {required: true, message: '请输入备案号', trigger: 'blur'}
            ],
            WebSite_ICON: [
              {required: true, message: '请输入备案号', trigger: 'blur'}
            ],
            WebSite_COMPANY_NAME: [
                    {required: true, message: '请输入公司名称', trigger: 'blur'}
            ],
            WebSite_MAIL: [
                    {required: true, message: '请输入网址', trigger: 'blur'}
            ],
            WebSite_PHONE: [
                    {required: true, message: '请输入商城电话', trigger: 'blur'}
            ],
            WebSite_SEO_DESC: [
                    {required: true, message: '请输入SEO描述', trigger: 'blur'}
            ],
            WebSite_SEO_KEY: [
              {required: true, message: '请输入关键字', trigger: 'blur'}
            ],
            WebSite_WEB_NAME: [
                    {required: true, message: '请输入网站名称', trigger: 'blur'}
            ]
          },
          fullImage: {
            filename: '',
            fullUrl: '',
            path: ''
          },
        }
      },
      methods: {
        CheckImg(){

        },
        beforeUpload (file) {
          if (file.size > 128 * 128) {
            this.$alert('图片大小必须小于30KB', '错误', {type: 'error'})
            return false;
          }
          if (file.type !== 'image/x-icon') {
            this.$alert('图片格式必须是ico', '错误', { type: 'error' });
            return false;
          }
        },
        handleRemove (file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview (file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        onEditFileSuccess (response) {
          if (parseInt(response.status) === 1) {
            console.log(this.fullImage.path = response.data.path);
            this.$message({
              message: '上传成功',
              type: 'success'
            })
          } else {
            this.$alert('服务器保存文件失败,请重新上传', '错误', {type: 'error'});
          }
        },
        getWebSetting () {
          let para = {}
          para.prefix = 'website'
          getSettings(para).then(res => {
            this.webSetList = res.data;
            let len = this.webSetList.length
            for (let i = 0; i < len; i++) {
              if (this.webSetList[i].key === 'WebSite_ADDRESS') {
                this.Form.WebSite_ADDRESS = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_CASE_NUMBER') {
                this.Form.WebSite_CASE_NUMBER = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_COMPANY_NAME') {
                this.Form.WebSite_COMPANY_NAME = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_CLOSED') {
                this.Form.WebSite_CLOSED = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_MAIL') {
                this.Form.WebSite_MAIL = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_PHONE') {
                this.Form.WebSite_PHONE = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_MAIL') {
                this.Form.WebSite_MAIL = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_SEO_DESC') {
                this.Form.WebSite_SEO_DESC = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_SEO_KEY') {
                this.Form.WebSite_SEO_KEY = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_WEB_NAME') {
                this.Form.WebSite_WEB_NAME = this.webSetList[i].value
              }
              if (this.webSetList[i].key === 'WebSite_ICON') {
                this.fullImage.fullUrl = this.webSetList[i].full_image
                this.fullImage.path = this.webSetList[i].value

              }
            }
          })
        },
        editWebSetting () {
          this.$refs.Form.validate((valid) => {
            if (valid) {
              let len = this.webSetList.length
              for (let i = 0; i < len; i++) {
                if (this.webSetList[i].key === 'WebSite_ADDRESS') {
                  this.webSetList[i].value = this.Form.WebSite_ADDRESS
                }
                if (this.webSetList[i].key === 'WebSite_CASE_NUMBER') {
                  this.webSetList[i].value = this.Form.WebSite_CASE_NUMBER
                }
                if (this.webSetList[i].key === 'WebSite_COMPANY_NAME') {
                  this.webSetList[i].value = this.Form.WebSite_COMPANY_NAME
                }
                if (this.webSetList[i].key === 'WebSite_MAIL') {
                  this.webSetList[i].value = this.Form.WebSite_MAIL
                }
                if (this.webSetList[i].key === 'WebSite_PHONE') {
                  this.webSetList[i].value = this.Form.WebSite_PHONE
                }
                if (this.webSetList[i].key === 'WebSite_MAIL') {
                  this.webSetList[i].value = this.Form.WebSite_MAIL
                }
                if (this.webSetList[i].key === 'WebSite_SEO_DESC') {
                  this.webSetList[i].value = this.Form.WebSite_SEO_DESC
                }
                if (this.webSetList[i].key === 'WebSite_SEO_KEY') {
                  this.webSetList[i].value = this.Form.WebSite_SEO_KEY
                }
                if (this.webSetList[i].key === 'WebSite_CLOSED') {
                  this.webSetList[i].value = this.Form.WebSite_CLOSED
                }
                if (this.webSetList[i].key === 'WebSite_WEB_NAME') {
                  this.webSetList[i].value = this.Form.WebSite_WEB_NAME
                }
                if (this.webSetList[i].key === 'WebSite_ICON') {
                    this.webSetList[i].value = this.fullImage.path
                }
              }
              editSettings(this.webSetList).then(res => {
                if (parseInt(res.status) === 1) {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  this.getWebSetting()
                } else {
                  this.$alert('保存失败', '失败', {type: 'error'})
                }
              })
            }
          })
        }
      },
      computed: {
      },
      mounted () {
        this.getWebSetting()
      }
    }
</script>
<style scoped rel="stylesheet/sass" lang="sass">
    .avatar
        width: 100px
        height: 100px
        display: block
        margin-top: 20px

        .el-row
        padding: 0 20px 10px 20px
    .content-head
        margin: 20px 0
        padding-bottom: 5px
        font-size: 18px
        border-bottom: 1px solid #DFE4ED
    .sale-statistic
        width: 100%
        thead
            tr
                background-color: #f4f5fa
                th
                    height: 50px
        td
            text-align: center
            height: 50px
    .el-form-item
        margin-bottom: 0px !important
    .image-list
        img
            left: 0
            width: 100px
            height: 100px
            background-color: #fbfdff
            border-radius: 6px
            margin-left: 5px
            float: left
            margin-top: 5px
    .options
        span:nth-child(n+2)
            margin-left: 20px
    .category-content
        display: inline-block
        span
            background-color: #f5f5f5
            display: inline-block
            padding: 0 5px
        span:nth-child(n+2)
            margin-left: 10px
    .upload-demo
       width: 320px !important
    .el-upload__tip
       font-size: 14px
</style>
